<template>
    <div id="keFenhong">
      <c-title :hide="false" text="已分红"></c-title>
      <div class="background_box1"></div>
      <div class="contenbox">
        <div class="topMy">
          <div class="left">
            <div class="txt">已分红</div>
            <div class="price">
              {{ dividend }}
              <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2Fintegral%2Fimage1.png" alt="" />
            </div>
          </div>
        </div>
  
        <!-- 列表 -->
        <div class="integralList">
          <div class="title">已分红列表</div>
          <div class="list" v-for="(item,ind) in list" :key="ind">
            <div class="li_le">
              <div class="name">{{ item.remark }}</div>
              <div class="time">{{ item.time }}</div>
            </div>
            <div class="li_ri">
              <div class="te">已分红</div>
              <div class="price">{{ item.money }}</div>
            </div>
          </div>
          
        </div>
      </div>
      <!-- -->
    </div>
  </template>
  
  
      
      <script>
    import yiFenhongController from "./yiFenhongController";
    
    export default yiFenhongController;
    </script>
     <style lang="scss" scoped>
     .background_box1 {
       color: #382c0a;
       background-color: #fff;
       background-image: -webkit-gradient(linear, left top, left bottom, from(var(--themeBaseColor)), to(#f5f5f5));
       background-image: -webkit-linear-gradient(var(--themeBaseColor), #f5f5f5);
       background-image: linear-gradient(var(--themeBaseColor), #f5f5f5);
       min-height: 12.125rem;
       padding: 1.5938rem 1.0938rem 0 1.0938rem;
     }
     .contenbox {
       padding: 0 0.625rem;
       margin-top: -8rem;
       padding-bottom: 1rem;
     }
     /* 顶部 */
     .topMy {
       height: 5.125rem;
       background: #fff;
       border-radius: 0.625rem;
       display: -webkit-box;
       display: -webkit-flex;
       display: -ms-flexbox;
       display: flex;
       -webkit-box-pack: justify;
       -webkit-justify-content: space-between;
       -ms-flex-pack: justify;
       justify-content: space-between;
       -webkit-box-align: center;
       -webkit-align-items: center;
       -ms-flex-align: center;
       align-items: center;
       padding: 0 1rem;
       .left {
         text-align: left;
         .txt {
           font-size: 0.75rem;
           color: #666666;
         }
         .price {
           display: -webkit-box;
           display: -webkit-flex;
           display: -ms-flexbox;
           display: flex;
           font-size: 1.5rem;
           img {
             margin-bottom: 0.25rem;
             margin-left: 0.25rem;
             width: 1rem;
             height: 1rem;
           }
         }
       }
     }
     
     /* 列表 */
     .integralList {
       margin-top: 0.5rem;
       padding: 1rem;
       border-radius: 0.625rem;
       background: #fff;
     }
     .title{
       font-size: 1rem;
       font-weight: bold;
       color: #333333;
       text-align: left;
       margin-bottom: 1rem;
     }
     .list{
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding-bottom: 1rem;
     }
     .li_le{
       text-align: left;
     }
     .name{
       font-weight: 500;
       color: #333333;
       font-size: 0.9125rem;
       margin-bottom: 0.5rem;
     }
     .time{
       font-size: 0.75rem;
       color: #999999;
       font-weight: 400;
     }
     .price{
       font-size: 0.875rem;
       color: #f20606;
     }
     .te{
       margin-right: 0.5rem;
     }
     
     .li_ri{
       display: flex;
       align-items: center;
     }
     </style>